import React from 'react';
import { withRouter } from 'react-router-dom'
import styles from './index.module.scss'
import { BASE_URL } from '../../utils/url.js'
import classNames from 'classnames';

function HouseItem({ houseCode, houseImg, title, tags, price, desc, history }) {
    return (
        <div className={styles.house} onClick={() => {
            history.push(`/detail${houseCode}`)
        }}>
            <div className={styles.imgWrap}>
                <img src={`${BASE_URL}${houseImg}`} />
            </div>
            <div className={styles.content}>
                <h3 className={styles.title}>{title}</h3>
                <div className={styles.desc}>{desc}</div>
                <div>
                    {
                        tags.map((item, index) => {
                            const tagName = `tag${index % 3 + 1}`
                            return <span key={item} className={classNames(styles.tag, styles[tagName])}>{item}</span>
                        })
                    }
                </div>
                <div className={styles.price}>
                    <span className={styles.priceNum}>{price}</span>
                </div>
            </div>
        </div>
    );
}

export default withRouter(HouseItem);